<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@page import="com.joinlabs.entity.Wares"%>
<%@page import="com.joinlabs.entity.Img"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	request.setAttribute("path", path);	
%>
<!DOCTYPE html>
<html>

	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Joinlabs为您定位</title>
		<style type="text/css">
			html {
				height: 100%
			}
			
			body {
				height: 100%;
				margin: 0px;
				padding: 0px
			}
			
			#container {
				height: 100%
			}
		</style>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=xvVMTKSDWqGC1VgkYzjwOn5BQhKVobEw">
			//v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
		</script>
		
		<script type="text/javascript" src="/common/js/jquery-1.11.3.js" charset="utf-8"></script>
		<link href='/common/css/product/style.css' rel="stylesheet" type="text/css" />
		
		<link rel="stylesheet" href="/common/layui/css/layui.css">
   		<script src="/common/layui/layui.js" charset="utf-8"></script>
		
	</head>

	<body>
	<c:if test="${sessionScope.usercolor == null}">
		<header id="backcolor1" style="background: #671B0D;">
		</c:if>
		<c:if test="${sessionScope.usercolor != null}">
		<header id="backcolor1" style="background:${sessionScope.usercolor};">
		</c:if>
			<div class="top center">
				<div class="left fl">
					<ul>
						<li>
							<a href="/user/loginreg/index" target="_blank">JoinLabs商城</a>
						</li>
						<li>|</li>
						<li>
							<a href="/product/fytype">Joinlabs全部商品</a>
						</li>
						<li>|</li>
						<li>
							<a href="">Joinlabs教育</a>
						</li>
						<li>|</li>
						<li>
							<a href="">JY游戏</a>
						</li>
						<li>|</li>
						<li>
							<a href="">JY阅读</a>
						</li>
						<li>|</li>
						<li>
							<a href="">JY服务</a>
						</li>
						<li>|</li>
						<li>
							<a href="">JY金融</a>
						</li>
						
						<li>|</li>
						<li>
							<a href="">风格</a>	
						</li>
						
						<li>
							
							 <div id="test1"></div>
							 <script>
								layui.use('colorpicker', function(){
								  var $ = layui.$
								  ,colorpicker = layui.colorpicker;
								  //常规使用
								  colorpicker.render({
								    elem: '#test1' //绑定元素
								    ,change: function(color){ //颜色改变的回调
								    	//console.log(color);
								    	$("#backcolor1").attr("style","background: "+color+";");
								    	$("#backcolor2").attr("style","margin-top: 100px;background:"+color+";color:#B0B0B0;");
								    	$("#jrgwc1").attr("style","background: "+color+";");
										
								    	
								    },done: function(color){
								        console.log(color)
								       
								        $.post("/product/procolor", {
											"usercolor": color,
										}, function(data) {
											if(data == "success") {
												alert("选择颜色成功,有眼光呀！");

											}else{
												alert("选择失败，其实默认色挺好的");
											}
										});
								        
								      }
								  });
								});
								</script>
						</li>
						<div class="clear"></div>
					</ul>
				</div>
				<div class="right fr">
					<div class="gouwuche fr">
						<a href="/shopcar/show">购物车</a>
					</div>
					<div class="fr">
						
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
		</header>
	
	
		
<div id="allmap" style="margin-top:3px;"></div>
		
		<script type="text/javascript">
			
			var map = new BMap.Map("allmap");
			var point = new BMap.Point(116.331398, 39.897445);
			map.centerAndZoom(point, 10);

			function myFun(result) {
				var cityName = result.name;
				map.setCenter(cityName);
				alert("您当前定位城市:" + cityName);
			}
			var myCity = new BMap.LocalCity();
			myCity.get(myFun);
			
			</script>
			
			
			
			
			<div id="container"></div>
			
			<script type="text/javascript">	
			var map = new BMap.Map("container"); // 创建地图实例

			map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图，设置中心点坐标和地图级别  map.centerAndZoom(point, 15);

			map.setMapStyleV2({
				styleId: '150c4f1800219d5f063b27a4db7389b0'
			});
			
			// 定义一个控件类，即function    
			function ZoomControl() {
				// 设置默认停靠位置和偏移量  
				this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
				this.defaultOffset = new BMap.Size(10, 250);
			}
			// 通过JavaScript的prototype属性继承于BMap.Control   
			ZoomControl.prototype = new BMap.Control();

			ZoomControl.prototype.initialize = function(map) {
				// 创建一个DOM元素   
				var div = document.createElement("div");
				// 添加文字说明    
				div.appendChild(document.createTextNode("点一下，立刻回归天安门的怀抱！！"));
				// 设置样式    
				div.style.cursor = "pointer";
				div.style.border = "1px solid gray";
				div.style.backgroundColor = "white";
				// 绑定事件，点击一次放大两级    
				div.onclick = function(e) {
						map.panTo(new BMap.Point(116.404, 39.915));
					}
					// 添加DOM元素到地图中   
				map.getContainer().appendChild(div);
				// 将DOM元素返回  
				return div;
			}

			// 定义一个控件类，即function    
			function ZzoomControl() {
				// 设置默认停靠位置和偏移量  
				this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
				this.defaultOffset = new BMap.Size(10, 300);
			}
			// 通过JavaScript的prototype属性继承于BMap.Control   
			ZzoomControl.prototype = new BMap.Control();

			ZzoomControl.prototype.initialize = function(map) {
				// 创建一个DOM元素   
				var div = document.createElement("div");
				// 添加文字说明    
				div.appendChild(document.createTextNode("本公司所在位置！"));
				// 设置样式    
				div.style.cursor = "pointer";
				div.style.border = "1px solid gray";
				div.style.backgroundColor = "white";
				  
				div.onclick = function(e) {
						map.panTo(new BMap.Point(113.484, 27.955));
					}
					// 添加DOM元素到地图中   
				map.getContainer().appendChild(div);
				// 将DOM元素返回  
				return div;
			}

			
			// 自定义控件必须实现initialize方法，并且将控件的DOM元素返回   
			// 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中   

			map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
			// 创建点坐标  var point = new BMap.Point(116.404, 39.915);
			//111°53′～114°15′，北纬27°51′～28°41′

			map.addControl(new BMap.NavigationControl());
			map.addControl(new BMap.NavigationControl());
			map.addControl(new BMap.ScaleControl());
			map.addControl(new BMap.OverviewMapControl());
			map.addControl(new BMap.MapTypeControl());
			map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用   

			// 创建控件实例    
			var myZoomCtrl = new ZoomControl();
			// 添加到地图当中    
			map.addControl(myZoomCtrl);

			// 创建控件实例    
			var myZzoomCtrl = new ZzoomControl();
			// 添加到地图当中    
			map.addControl(myZzoomCtrl);
			//window.setTimeout(function(){
			//  map.panTo(new BMap.Point(112.409, 27.918));    
			//}, 2000);
		</script>
		
		
		
		
	</body>

</html>